<template>
	<view class="searhPage">
		<view class="top">
			<span class="title">{{searchData.title}}</span>
			<span class="delIcon" v-if="searchData.isShowDel">删除</span>
		</view>
		<view class="wordList">
			<li v-for="(word,index) in searchData.words" :key="index">
				<view class="icon">
					<span class="historyIcon" v-if="!word.isNew">历史</span>
					<span class="bookIcon" v-if="word.isNew">词典</span>
				</view>
				<view class="wordInfo">
					<p class="word">{{word.word}}</p>
					<p class="translate">{{word.translate}}</p>
				</view>
			</li>
		</view>
	</view>
</template>

<script>
	export default {
		name: "search-page",
		props: {
			searchData: {
				type: Object,
				default: {},
				require:true,
				
			}
		},
	}
</script>

<style>
	.searhPage{
		
		padding: 0.8rem 1.5rem;
	}
	.top{
		display: flex;
		justify-content: space-between;
		margin-bottom: 1rem;
	}
	.top .title{
		color: rgba(115, 113, 113, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.wordList li{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 19.13rem;
		height: 2.75rem;
	}
	.wordInfo{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin: 0 1rem;
	}
	.wordInfo .word{
		color: rgba(51, 51, 51, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.wordInfo .translate{
		color: rgba(115, 113, 113, 0.88);
		font-size: 0.63rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}
</style>